import React,{Component} from 'react';
import { connect } from 'react-redux'
import { fetchList,addCart,update,deleteCart} from "../actions"
import { Card } from 'antd';
import { Pagination } from 'antd';
import { message, Button } from 'antd';

const { Meta } = Card;


const mapStateToProps=(state)=>{
    return{
        list:state.about.list
    }
}

class ListItem extends Component{
    success = () => {
        message.success('商品添加成功,请在购物车查看');
    };
    addProductToCart=(about)=>{
        // console.log('about',about); 
        this.props.addCart(about);
        this.success();
    }
    render(){
        const {img,title,content}=this.props;
        return(
            <Card id="card"
            hoverable 
            style={{ width: 240 }}
            cover={<img alt="example" src={img}/>}
            >
            <Meta title={title} description={minnumber(content)}/>
            {/* <a href='javascript:void(0)' onClick={()=>this.addProductToCart(this.props)}>加入购物车</a> */}
            <Button id="cardId" onClick={()=>this.addProductToCart(this.props)}>加入购物车</Button>
            </Card>
        )
    }
}
function minnumber(content){

    if(content.length<=40){
        return content;
    }else{
        return content.substr(0,40)+'...';
    }
}
class About extends Component{
getlist(){
    const {rows,total}=this.props.list
    var jsx=[];
    if(rows!==undefined){
        for(var i=0;i<rows.length;i++){
            jsx.push(<ListItem key={i} {...rows[i]} addCart={this.props.addCart} update={this.props.update} deleteCart={this.props.deleteCart}></ListItem>)
        }
    }
    return jsx;
}
// showPages(){
//     const {total}=this.props.list;
//     var jsx=[];
//     if(total!==undefined){
//         var totalPages=Math.ceil(total/20);
//         for(let i=1;i<=totalPages;i++){
//             jsx.push(<li key={i}><a href="javascript:void(0)" onClick={()=>this.changePage(i)}>{i}</a></li>)
//         }
//     }
//     return jsx;
// }
changePage=(i)=>{
    this.props.fetchList({page:i})
}
onChange=(page)=>{
    this.changePage(page);
}
componentDidMount(){
    this.props.fetchList();
}
        render(){
            const {list,fetchList}=this.props;
        return(
            <div>
                {this.getlist()}
                {/* <nav aria-label="Page navigation">
                <ul className="pagination">
                <li>
                    <a href="javascript:void(0)" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                {this.showPages()}
                <li>
                    <a href="javascript:void(0)" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                </ul>
                </nav> */}
                <Pagination id="pagination" onChange={this.onChange} total={list.total} pageSize={20} />
            </div>
        )
    }
}

export default connect(mapStateToProps,{fetchList,addCart,update,deleteCart})(About);